<template>
    <div class="page">
        <div class="flexWrap pageTop">
            <div class="flexWrap filter-bar">
                <img src="../../assets/img/filter.png" />
                <span class="title">筛选：</span>
            </div>
            <el-input style="width: 140px; transform:scale(0.9)" size="mini" clearable placeholder="用户姓名/登录名" v-model="filter.username" @change="toFilter"/>
            <el-button v-if="me.isAdmin" type="primary" plain size="mini" style="transform:scale(0.8)" icon="el-icon-circle-plus" @click="toCreate">新增</el-button>
        </div>
        <div class="pageCenter">
            <el-table :data="list" stripe size="small" :cell-style="{padding:'10px 0'}">
                <el-table-column prop="id" label="ID" width="100" />
                <el-table-column prop="name" label="姓名" min-width="140" />
                <el-table-column prop="account" label="登录名" width="160" />
                <el-table-column label="角色" width="160">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.roleStr}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="120">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status === 1"  type="success">正常</el-tag>
                        <el-tag v-else  type="danger">禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column v-if="me.isAdmin" label="操作" width="120" >
                    <template slot-scope="scope">
                        <el-button type="text" @click="toEditRow(scope.$index, scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--详情页-->
        <el-dialog :visible="detailShow" title="编辑信息" width="380px" center append-to-body border>
            <div class="flexWrap">
                <div class="group">
                    <div class="top">登录名：</div>
                    <div v-if="detail.id > 0" class="bottom" style="padding-left:10px;width:330px;height:25px;line-height:25px;background-color: #dddddd;border-radius:4px;">{{detail.account}}</div>
                    <el-input v-else v-model="detail.account" class="bottom" style="width: 330px" placeholder="" />
                </div>
            </div>

            <div class="flexWrap w-per100">
                <div class="group" style="width: 330px">
                    <div class="top">登录密码：</div>
                    <el-input v-model="detail.password" class="bottom" style="width: 330px" placeholder="" />
                </div>
            </div>

            <div class="flexWrap w-per100">
                <div class="group" style="width: 330px">
                    <div class="top">姓名：</div>
                    <el-input v-model="detail.name" class="bottom" style="width: 330px" placeholder="" />
                </div>
            </div>
            <div class="flexWrap w-per100">
                <div v-if="me.isAdmin && detail.id > 0" class="group" style="width: 330px">
                    <div class="top">状态：</div>
                    <el-select clearable v-model="detail.status" placeholder="请选择" style="width: 330px">
                        <el-option
                            v-for="item in filter.statusAry"
                            :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="flexWrap w-per100">
                <div class="group" style="width: 330px">
                    <div class="top">备注：</div>
                    <textarea type="text"
                              class="input-area"
                              style="width: 330px; height: 80px;"
                              v-model="detail.remark" placeholder="">
                            </textarea>
                </div>
            </div>
            <span slot="footer">
                <el-button @click="toClose">取 消</el-button>
                <el-button type="primary" @click="toSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import md5 from '../../utils/md5'
export default {
    data: function(){
        return {
            me:{},
            filter:{
                username: "",
                status:1, statusAry:[{id:1, name:'激活'},{id:-1, name:'禁用'}],
                role:"",
                roleAry:[
                    {id:1, name:"管理员"},
                    {id:2, name:"平台运营"}
                ],
            },

            tbl:{total:0, size:20, curr:1},
            list:[],

            detail:{},
            detailShow:false
        }
    },
    created() {
        this.me = this.auth.getAccount();
        if (this.me.roles && this.me.roles.length > 0) {
            for (let i = 0; i < this.me.roles.length; i++) {
                if (this.me.roles[i] === 1) {
                    this.me.isAdmin = true
                    break
                }
            }
        }

        this.fetchData();

    },
    methods: {
        /**************** 动作 ****************/
        tblCurPageChanged(v) {
            this.tbl.curr = v;
            this.fetchData();
        },
        toFilter() {
            this.fetchData()
        },
        toCreate() {
            if (this.detail.id > 0) {
                this.detail = {id:0}
            }
            this.detailShow = true
            this.$forceUpdate()
        },
        toEditRow(index, row) {
            if (row.id !== this.detail.id) {
                this.detail = row
            }
            this.detailShow = true
            this.$forceUpdate()
        },
        toClose() {
            this.detailShow = false
            this.$forceUpdate()
        },
        toSubmit() {
            if (this.detail.account === "") {this.$message.error("登录名不能空~");return}
            if (this.detail.id === 0) {
                if (this.detail.password === "") {this.$message.error("密码不能空~");return}
                if (this.detail.password.length < 5) {this.$message.error("密码不能小于5位~");return}
            } else if (this.detail.password) {
                if (this.detail.password.length < 5) {this.$message.error("密码不能小于5位~");return}
            }

            this.detail.status = 1
            this.detail.roles = "2"
            let url = "ads/account.save";
            if (this.detail.id) {
                if (this.detail.password) {
                    this.detail.password = md5.hex_md5("bv9tpk*#en#&" + this.detail.password)
                }
            } else {
                this.detail.password = md5.hex_md5("bv9tpk*#en#&" + this.detail.password);
            }

            this.request.post({
                url: url, data: this.detail
            }).then(res => {
                this.$message.success({message:"提交成功！", duration:1000});
                this.detail = {id:0};
                this.detailShow = false
                this.fetchData();
                this.$forceUpdate()
            },res => {
                this.$message.error(res.msg || "提交失败~");
            })
        },

        /**************** 接口 ****************/
        fetchData() {
            let params = {
                pageSize:this.tbl.size, pageNumber:this.tbl.curr,
                status:this.filter.status, username:this.filter.username
            }
            this.request.get({
                url: "case.list",
                data: params
            }).then(res => {
                this.list = res.result;
                this.tbl.total = (res && res.totalCount) ? res.totalCount : this.list.length;

                for(let i = 0; i < this.list.length; i ++) {
                    this.list[i].roleStr = ""
                    let ary = this.list[i].roles.split(",")
                    for(let j = 0; j < this.filter.roleAry.length; j ++) {
                        for (let k = 0; k < ary.length; k++) {
                            if (this.filter.roleAry[j].id == ary[k]) {
                                this.list[i].roleStr += this.filter.roleAry[j].name + ","
                                break
                            }
                        }
                    }

                    if (this.list[i].roleStr) {
                        this.list[i].roleStr = this.list[i].roleStr.slice(0, this.list[i].roleStr.length - 1)
                    } else {
                        this.list[i].roleStr= "--"
                    }
                }
            },res => {
                this.$message.error(res.msg || "获取数据失败~");
            })
        }
    }
}
</script>

<style scoped>

</style>
